<template>
  <div class="ssds">
    <div class="friend" @click="bagc">
      >
      <div class="fix">
        <div>
          <van-icon name="arrow-left" size="20" @click="back" />
        </div>
        <div>
          <van-icon name="photo-o" size="20" @click.stop="upload" />
        </div>
      </div>
    </div>
    <div class="top">
      <div style="font-size: 1.6rem">杨邦东</div>
      <div style="margin-left: 8px">
        <img
          src="../src/assets/heade.png"
          alt=""
          style="width: 3rem; height: 3rem"
          @click="godest"
        />
      </div>
    </div>
    <div
      class="box"
      v-for="(item, index) in showlist"
      v-if="showlist.length != 0"
    >
      <div class="header" style="margin-top: 1.5rem">
        <img :src="item.image" alt="" style="width: 3rem; height: 3rem" />
      </div>
      <div class="colum">
        <!-- <div>{{ item.warnfriend.join(",") }}</div> -->
        <a class="video" style="display: flex">
          <div v-for="it in item.image">
            <img :src="it" alt="" class="litbox" @click="showup(it)" />
          </div>
          &nbsp; &nbsp; &nbsp;
          <div style="text-align: left">{{ item.title }}</div>
        </a>
        <div>
          <span>2周前</span> <span>{{ item.address }}</span>
        </div>
        <br />
        <div>
          <van-icon name="like" />{{ item.warnfriend.join(",") }}觉得很赞
        </div>
      </div>
      <div class="dian">
        <van-popover
          v-model:show="popoverVisible[index]"
          actions-direction="horizontal"
          theme="dark"
          :actions="actions"
          placement="left"
          ref="popoverRef"
          @select="onSelect"
        >
        </van-popover>
        <div @click="getpoint(index)">。。</div>
      </div>
    </div>
    <van-cell-group inset v-if="showcomment" style="width: 100vw">
      <van-field
        v-model="message"
        rows="3"
        autosize
        label="评论"
        type="textarea"
        maxlength="100"
        placeholder="请输入评论"
        show-word-limit
        @blur="hiddenshow"
      >
        <template #button>
          <van-button size="small" type="success" @click="sendcomment"
            >发送</van-button
          >
        </template>
      </van-field>
    </van-cell-group>
    <!-- -------------我的朋友圈---------------------- -->
    <div class="box" v-for="item in friendlist" :key="item.id">
      <div class="header" style="margin-top: 1.5rem">
        <img
          :src="item.header"
          alt=""
          style="width: 3rem; height: 3rem"
          @click="read(item.id)"
        />
      </div>
      <div class="colum">
        <div>{{ item.name }}</div>
        <a class="video" :href="item.video">
          <!-- <img src="../src/assets/yasuo.jpg" alt="" style="width: 100%; height:4rem"> -->
          <img
            :src="item.picture"
            alt=""
            style="width: 100%; height: 7rem"
            @click="readline(item.id)"
          />
        </a>
        <div>
          <span>{{ item.time }}</span> <span>{{ item.address }}</span>
        </div>
      </div>
      <div class="dian">。 。</div>
    </div>
  </div>
</template>


<script setup>
import { onMounted, reactive, ref } from "vue";
import { getstorage } from "../utils/local";
import {
  getfriend,
  showfriend,
  getfriendinfo,
  getcomment,
} from "../api/getlogin";
import { showImagePreview } from "vant";
import { useRouter } from "vue-router";
const showlist = reactive([]);
const message = ref("");
const showcomment = ref(false);
const popoverVisible = ref([]);
const showPopovers = ref([]);
const friendlist = reactive([]);

const router = useRouter();
//初始化点赞状态

//朋友圈点赞
const showPopover = ref(false);
const actions = [
  { text: "点赞", id: 10 },
  { text: "评论", id: 11 },
];
const onSelect = (action) => {
  if (action.id === 10) {
    popoverVisible.value.forEach((item, i) => {
      if (item === true) {
        showlist[i].warnfriend.push("杨邦东");
      }
    });
  } else if (action.id === 11) {
    showcomment.value = true;
  }
};
const sendcomment = () => {
  if (!message.value) {
    return;
  } else {
    getcomment({ text: message.value, username: getstorage("userinfo") });
  }

  // showcomment.value = false;
  // showlist.forEach((item, i) => {
  //   if (popoverVisible.value[i] === true) {
  //     item.comment.push(message.value);
  //   }
  // });
  // message.value = "";
};
const hiddenshow = () => {
  sendcomment();

  showcomment.value = false;
  popoverVisible.value.forEach((item, i) => {
    if (item === true) {
      popoverVisible.value[i] = false;
    }
  });
  message.value = "";
};
/**
 * 获取点赞按钮点击的ID并显示弹出框
 *
 * @param id 点击按钮的ID
 */
const popoverRef = ref(null);
const show = ref(true);
const getpoint = (id) => {
  popoverVisible.value = popoverVisible.value.map((_, i) => i === id);
  popoverVisible.value.forEach((item, i) => {
    if (i === id) {
      popoverVisible.value[id] = true;
    }
  });
};
const back = () => {
  history.go(-1);
};

const read = (i) => {
  showImagePreview([friendlist[Number(i) - 1].header]);
};

const readline = (i) => {
  showImagePreview([friendlist[Number(i) - 1].picture]);
};

const bagc = () => {
  showImagePreview(["http://localhost:8080/img/friend.977c3956.jpg"]);
};

//展示上传的图片

const showup = (e) => {
  showImagePreview([e]);
};

//进入个人设置
const godest = () => {};
//进入发表朋友圈

const upload = () => {
  router.push({ path: "/upload" });
};
onMounted(async () => {
  getfriendinfo().then((res) => {
    res.data.forEach((e) => {
      showlist.push(e);
      popoverVisible.value = new Array(showlist.length).fill(false);
    });
  });
});
</script>
 


<style scoped>
.ssds {
  position: relative;
}

.friend {
  background: url("../src/assets/friend.jpg") no-repeat;
  background-size: cover;
  height: 80vw;
  width: 100%;
}

.top {
  position: absolute;
  top: 28rem;
  left: 24rem;
  color: #fff;
  display: flex;
  justify-content: center;
}

.box {
  width: 90vw;
  height: 11rem;
  margin: 2rem;
  border: 1px solid #fff;
  margin-top: 2rem;
  display: flex;
  justify-content: space-around;
}

.video {
  width: 20rem;
  height: 7rem;
  border: 1px solid #fff;
}

.colum {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.dian {
  margin-top: 8rem;
}

.fix {
  margin: 10px;
  display: flex;
  justify-content: space-between;
  color: #fff;
}

.litbox {
  width: 5rem;
  height: 5rem;
  border: 1px solid red;
}
::v-deep(.van-popover__content) {
  width: 12rem;
  display: flex;
}
</style>